<template>
  <div class="login">
    <div class="contentBody">
      <van-cell-group>
        <van-field v-model="username" label="用户名" placeholder="请输入用户名"/>
        <van-field v-model="password" type="password" label="密码" placeholder="请输入密码"/>
      </van-cell-group>
      <van-button size="large" type="primary" @click="submit"></van-button>


      <div>hahhahahhahahahahhahahahh</div>

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Vue from 'vue'
  import { Field } from 'vant';
  import { Button } from 'vant';
  import { Toast } from 'vant';
  Vue.use(Field);
  Vue.use(Button);
  export default{
    data(){
      return {
        username:'',
        password:'',
      }
    },
    methods: {
      submit() {
        let validate = this.username==''||this.password=='';
        if(validate) {
          Toast("请输入用户名或密码")
        }else {
          this.$router.push({path:'/home'})
        }
      }
    },
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .login {
    width 100%
    height 100vh
    background-image url("../../static/images/yueliang.jpg")
    background-size cover
    .contentBody {
      padding-top 4rem
      .van-cell-group {
        background-color transparent
        display flex
        flex-direction column
        align-items center
        .van-cell {
          border 1px solid #dedede
          width: 9rem
          padding 0
          margin .3rem auto
          line-height 40px
          font-size 16px
          .van-cell__title {
            border-right 1px solid #dedede
            background-color #dedede
          }
        }
      }
      .van-hairline--top-bottom::after {
        border-width 0
      }
      .van-button--large {
        width 8rem
        margin-top 1rem
      }
      .van-button::before {
        border-color transparent
        background-color transparent
      }
    }
  }
</style>
